<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Title</title>
</head>

<body style="font-size: 14px;" onbeforeunload="beforeunloadHandler()">
  <article style="display: flex; flex-direction: column; width: 100%; height: 100%">
    <section style="flex: 1; display: flex; flex-direction: row">
      <section style="flex: 1 1 0; display: flex; flex-direction: column">
        <fieldset>
          <legend>环境设置</legend>
          <label title="服务环境">服务环境</label><input id="environment-address" type="text" value="" />
          <!-- <label title="服务环境">服务环境</label><input id="environment-address" type="text" value="https://test.router.justalkcloud.com:18443" /> -->
          <!-- <label title="服务环境">服务环境</label><input id="environment-address" type="text" value="https://ums.justalkcloud.com:18443" /> -->
          <button id="getTrust" onclick="window.open(environmentAddressInput.value, '_blank')" title="信任地址">信任地址</button>
          <label for="appKey" title="appKey">appKey</label><input id="appKey" type="text" value="6c06d1b0d9015e47ec144097" />
        </fieldset>
        <fieldset>
          <legend>登录/登出</legend>
          <label>用户名（不可为汉字）</label><input id="accountname" type="text" />
          <label>密码</label><input id="accountPsd" type="text" value="1" />
          <label title="心跳间隔">心跳间隔（ms,可选）</label><input id="heartbeatTime" type="text" value="500" />
          <hr />
          <button id="login" onclick="login()">登录</button>
          <button id="logout" onclick="logout()" disabled>登出</button>
        </fieldset>
        <fieldset>
          <legend>会议状态</legend>
          <div><input type="text" id="channelNumber" placeholder="房间号" disabled /><button id="channelState" onclick="queryChannelState()" disabled>查询会议状态</button></div>
          <div id="channelContent"></div>
        </fieldset>
        <fieldset>
          <legend>加入会议</legend>
          <label>房间号</label><input id="conference-number" type="text" disabled />
          <label title="昵称">昵称（可选）</label><input id="nickname" type="text" disabled />
          <label title="密码">密码（可选）</label><input id="password" type="text" value="123456" disabled />
          <label title="会议最大人数">会议最大人数（可选）</label><input id="maxPNum" type="text" value="16" disabled />
          <label title="会议最大分辨率">会议最大分辨率（可选）
            <select id="meetingMaxResolution" disabled>
              <option value="0" selected>360P</option>
              <option value="1">720P</option>
              <option value="2">1080P</option>
            </select>
          </label>
          <label title="回调自定义属性">回调自定义属性（可选）</label><input id="restfulcallback" type="text" disabled />
          <label title="音量回调间隔">音量回调间隔（毫秒）</label><input id="audiocallbackset" value="3000" type="text" />
          <label title="媒体音频">媒体音频</label><input id="cntda" type="text" value="true" />
          <label title="媒体视频">媒体视频</label><input id="cntdv" type="text" value="true" />
          <hr />
          <div>录制设置</div>
          <select id="recordType" onchange="recordTypes(this.value)" disabled>
            <option value="1" selected>阿里云</option>
            <option value="2">七牛</option>
          </select>
          <div id="recordDiv">
            <label title="是否视频录制">视频录制<input id="isVideo" type="checkbox" disabled /></label>
            <label>bucketName</label><input id="bucketName" class="ali qin" data="bucketName" type="text" disabled />
            <label>secretKey</label><input id="secretKey" class="ali qin" data="secretKey" type="text" disabled />
            <label>accessKey</label><input id="accessKey" class="ali qin" data="accessKey" type="text" disabled />
            <label id="uploadEndPoints" title="访问域名">访问域名<input id="uploadEndPoint" data="访问域名" class="ali" type="text" disabled /></label>
            <label>文件名</label><input id="fileName" class="ali qin" data="文件名" type="text" disabled />
            <button id="sureSet" title="确认设置" onclick="sureSets()" disabled>保存设置</button>
          </div>
          <hr />
          <div>CDN推流设置</div>
          <div id="cdnDiv">
            <label>CDN地址</label><input id="cdnAddrinp" data="CDN地址" type="text" disabled />
            <button id="sureSetCdn" title="确认设置" onclick="sureSetsCdn()" disabled>保存设置</button>
          </div>
          <hr />
          <button id="join" onclick="join()" title="加入会议" disabled>加入会议</button>
          <button id="leave" onclick="leave()" title="离开会议" disabled>离开会议</button>
          <button id="m_stop" onclick="stopconf()" title="结束会议" disabled>结束会议</button>
        </fieldset>
        <fieldset>
          <legend>成员列表</legend>
          <div id="memberList"></div>
        </fieldset>
        <fieldset>
          <legend>接口测试</legend>
          <!-- <button id="call" onclick="operatingVideos()" title="call" disabled>开启视频通话</button>-->
          <!-- <button id="lvideo" onclick="operatingVideoStreamLocal()" title="打开/关闭本地视频采集" disabled>关闭本地视频采集</button>-->
          <!-- <button id="lvideo" onclick="operatingVideoStreamLocal()" title="打开/关闭本地视频采集" disabled>打开本地视频采集</button> -->
          <!-- <label title="对端视频尺寸">对端视频尺寸（可选）
            <select id="remoteResolution" disabled>
              <option value="1">最小尺寸</option>
              <option value="2" selected>小尺寸</option>
              <option value="3">大尺寸</option>
              <option value="4">最大尺寸</option>
            </select>
          </label>
          <button id="rvideo" onclick="operatingVideoStreamRemote()" title="打开/关闭对端视频" disabled>关闭对端视频</button>
          <hr />-->
          <button id="startcall"  onclick="operatingVideos('self')" title="结束视频通话" disabled>开启视频通话</button>
          <button id="stopcall" onclick="operatingstopVideos()" title="结束视频通话" disabled>结束视频通话</button>
          <button id="getmvinfo" onclick="getMedianotify()" title="刷新媒体订阅信息" disabled>刷新媒体订阅信息</button>
          <button id="camera" onclick="operatingVideoStreamLocal()" title="打开/关闭视频" disabled>关闭本地视频采集</button>
          <button id="audio" onclick="operatingAudioStreamLocal()" title="打开/关闭麦克风" disabled>关闭麦克风</button>
          <button id="voice" onclick="operatingVoiceStreamLocal()" title="打开/关闭扬声器" disabled>关闭扬声器</button>
          <button id="record" onclick="operatingRecord()" title="开始/结束录制" disabled>开始录制</button>
          <button id="cdn" onclick="operatingCDN()" title="开始/结束CDN推流" disabled>开始CDN推流</button>
          <button id="share" onclick="screenShare()" title="开始/结束屏幕共享" disabled>开始屏幕共享</button>
          <hr />
          <label>切换摄像头
            <select id="switch-video-input" title="切换摄像头" onchange="switchCamera(this.value)"
              disabled></select>
          </label>
          <label>切换扬声器
            <select id="switch-audio-output" title="切换扬声器" onchange="switchSpeaker(this.value)"
              disabled></select>
          </label>
          <label>切换麦克风
            <select id="switch-audio-input" title="切换麦克风" onchange="switchMicrophone(this.value)"
              disabled></select>
          </label>
          <button id="reflesh" onclick="reflesh()" title="刷新设备列表" disabled>刷新设备列表</button>
        </fieldset>
        <fieldset>
          <legend>消息发送</legend>
          <label>onlineMessage：<input id="onlineMessage" type="text" disabled /> 发送给：<input id="touser" type="text" disabled /></label>
          <button id="send-onlineMessage" onclick="sendOnlineMessage()" disabled>发送</button>
          <hr />
          <label>text消息：<input id="message-content" type="text" disabled /></label>
          <label id="toLabel">发送给
            <select id="toUser" disabled>
            </select>
          </label>
          <button id="send-message" onclick="sendMessage()" title="发送消息" disabled>发送消息</button>
          <hr />
          <label>消息类型：<input id="message-type" type="text" disabled /></label>
          <label>消息内容：<input id="message-customize" type="text" disabled /></label>
          <label id="toLabel">发送给
            <select id="tousers" disabled>
            </select>
          </label>
          <button id="send-conf-message" onclick="sendConfMessage()" title="发送消息" disabled>发送自定义消息</button>
          <hr />
          <input type="text" id="contentText" disabled>
          <button id="send-text" onclick="sendCommand()" title="发送指令" disabled>发送指令</button>
        </fieldset>
        <fieldset>
          <legend>频道自定义信息</legend>
          <label>设置频道自定义属性：<input id="custom-property" type="text" disabled /> 频道内容：<input id="custom-property-value" type="text" disabled /></label>
          <button id="set-custom-property" onclick="setCProperty()" disabled>设置</button>
        </fieldset>

        <fieldset>
          <legend>会议信息</legend>
          <div>channelUri:<span id="channelUri" style="word-break:break-all;"></span></div>
          <div>channelId:<span id="channelId"></span></div>
          <div>channelNum:<span id="channelNum"></span></div>
          <div>title: <span id="title"></span></div>
          <div>cdnState: <span id="cdnState"></span></div>
          <div>recordState: <span id="recordState"></span></div>
          <div>自定义: <span id="custom" style="word-break:break-all;"></span></div>
        </fieldset>
        <fieldset>
          <legend>其他</legend>
          <div>版本：<span id="version"></span></div>
        </fieldset>
      </section>
      <section style="flex: 1 1 0; display: flex; flex-direction: column">
				<video id="localVideo" autoplay playsinline webkit-playsinline muted style="padding:0;width: 300px;"></video>
        <div id="shareVideo" style="padding:0;width: 500px;"></div>
        <div id="remoteVideo"></div>
      </section>
    </section>
    <section>
      <fieldset>
        <legend>统计信息</legend>
        <button id="staticBtn" onclick="getStatistics()" disabled>获取/刷新统计信息</button>
        <div id="statistics" style="font-size:13px;overflow:auto;max-height:400px;word-break:break-all;"></div>
      </fieldset>
      <fieldset>
        <legend>日志</legend>
        <button class="downloadLog" onclick="downloadLog()">下载日志</button>
        <div id="debug" style="font-size:13px;overflow:auto;max-height:500px;word-break:break-all;"></div>
      </fieldset>
    </section>
  </article>
  <script src="/static/js/juphoon-sdk.webrtc.js"></script>
  <script src="/static/js/index.js?1"></script>
</body>

</html>
